<template>
  <div>
    <div id="qiu_login">
      <div id="login_item">
        <div>
          <h1 id="logo_name">秋</h1>
        </div>
        <h3>欢迎注册秋</h3>
        <h4>创建一个新管理账户</h4>
        <div class="item">
          <div class="group">
            <input
              type="text"
              class="admin"
              placeholder="请输入用户名"
              v-model.trim="names"
              @blur="verifyName"
            />
            <a-button
              type="primary"
              style="display: none"
              @blur="verifyName"
            ></a-button>
            <span class="icons-list">
              <a-icon
                type="check-circle"
                theme="twoTone"
                two-tone-color="#52c41a"
                :style="{ display: yicoN }"
              />
              <a-icon
                type="close-circle"
                theme="twoTone"
                two-tone-color="#ee1010"
                :style="{ display: nicoN }"
              />
            </span>
          </div>
          <div class="group">
            <input
              :type="typePwd"
              class="admin"
              placeholder="请输入密码"
              v-model.trim="pwd"
              @blur="verifyPwd"
            />
            <a-button
              type="primary"
              style="display: none"
              @blur="verifyPwd"
            ></a-button>
            <img :src="eyes ? by : ky" @click="eyesClick" />
            <span class="icons-list">
              <a-icon
                type="check-circle"
                theme="twoTone"
                two-tone-color="#52c41a"
                :style="{ display: yicoP }"
              />
              <a-icon
                type="close-circle"
                theme="twoTone"
                two-tone-color="#ee1010"
                :style="{ display: nicoP }"
              />
            </span>
          </div>
          <div class="group">
            <input
              :type="typePwds"
              class="admin"
              placeholder="请再次输入密码"
              v-model.trim="pwds"
              @blur="verifyPwds"
            />
            <a-button
              type="primary"
              style="display: none"
              @blur="verifyPwds"
            ></a-button>
            <img :src="eyess ? by : ky" @click="eyesClicks" />
            <span class="icons-list">
              <a-icon
                type="check-circle"
                theme="twoTone"
                two-tone-color="#52c41a"
                :style="{ display: yicoPs }"
              />
              <a-icon
                type="close-circle"
                theme="twoTone"
                two-tone-color="#ee1010"
                :style="{ display: nicoPs }"
              />
            </span>
          </div>
          <div>
            <a-checkbox @change="onChange">我同意注册协议</a-checkbox>
          </div>
          <div class="text-center">
            <button
              id="reg_btn"
              :disabled="consent"
              v-bind:class="{ btnsty: !consent }"
              @click="regClcik"
            >
              注册
            </button>
          </div>
          <div>
            <span>已有账户了? <router-link to="/">点击登录</router-link></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      names: "",
      pwd: "",
      pwds: "",
      consent: true,
      yicoN: "none",
      nicoN: "none",
      yicoP: "none",
      nicoP: "none",
      yicoPs: "none",
      nicoPs: "none",
      eyes: true,
      eyess: true,
      typePwd: "password",
      typePwds: "password",
      by: require("@/assets/by.svg"),
      ky: require("@/assets/ky.svg"),
    }
  },
  methods: {
    /*表单验证*/
    regClcik() {
      if (this.verifyName() && this.verifyPwd() && this.verifyPwds()) {
        console.log("验证成功开始注册")
        let bnaem = this.names
        let bpwd = this.pwd
        this.axios.post("/admin", `bname=${bnaem}&bpwd=${bpwd}`).then((res) => {
          // console.log(res)
          if (res.data.code == 200) {
            this.$toast({
              msg: "注册成功",
              duration: 3000,
            })
            this.$router.push("/login")
          } else {
            alert("提示", "该用户已存在")
          }
        })
      }
    },

    /*密码明文*/
    eyesClick() {
      if (this.eyes) {
        this.eyes = false
        this.typePwd = "text"
      } else {
        this.eyes = true
        this.typePwd = "password"
      }
    },
    /*密码复验*/
    eyesClicks() {
      if (this.eyess) {
        this.eyess = false
        this.typePwds = "text"
      } else {
        this.eyess = true
        this.typePwds = "password"
      }
    },
    //姓名验证
    verifyName() {
      let reg = /^[A-Za-z0-9]{3,20}$/
      if (reg.test(this.names)) {
        // console.log(reg.test(this.names))
        this.yicoN = ""
        this.nicoN = "none"
        return true
      } else {
        this.$message.info("昵称必须在4-20个数字、英文之间")
        this.nicoN = ""
        this.yicoN = "none"
        return false
      }
    },
    //密码验证
    verifyPwd() {
      let reg = /^\w{5,17}$/
      if (reg.test(this.pwd)) {
        // console.log(this.pwd)
        this.yicoP = ""
        this.nicoP = "none"
        return true
      } else {
        this.$message.info("密码必须6位以上包含大小写字母和数字!")
        this.nicoP = ""
        this.yicoP = "none"
        return false
      }
    },
    //密码重复验证
    verifyPwds() {
      // console.log(reg)
      let reg = /^\w{5,17}$/
      if (reg.test(this.pwds) && this.pwds == this.pwd) {
        // console.log(this.pwds)
        this.yicoPs = ""
        this.nicoPs = "none"
        return true
      } else {
        this.$message.info("两次密码不相同!请重新输入")
        this.nicoPs = ""
        this.yicoPs = "none"
        return false
      }
    },
    /*协议注册按钮*/
    onChange(e) {
      this.consent = !e.target.checked
    },
  },
}
</script>
<style src="../assets/css/general.css" scoped></style>
<style scoped>
.item {
  text-align: left;
}
.text-center > #reg_btn {
  background-color: rgba(213, 168, 88, 0.5);
}
.btnsty {
  background-color: #d7ba46 !important;
}
.group {
  position: relative;
}
.group img {
  position: absolute;
  top: 9px;
  right: 35px;
  cursor: pointer;
}
.icons-list {
  position: absolute;
  top: 8px;
  right: 10px;
}
</style>
